import React, { useEffect, useState } from "react";
import "./SetTime.css";
import { NavBar } from "@nutui/nutui-react";
import { ArrowLeft } from "@nutui/icons-react";
import { useNavigate } from "react-router-dom";
import { Switch, Picker } from "antd-mobile";
import axios from "../../../utils/Index";
export default function SetTime() {
  let Navigate = useNavigate();
  let [flag, setFlag] = useState(false);
  let [list, setList] = useState([]);
  let [value, setValue] = useState([
    { type: "", hour: "", minute: "", flag: false },
  ]);
  let [visible, setVisible] = useState(false);
  let basicColumns = [
    [
      { label: "工作日", value: "工作日" },
      { label: "每天", value: "每天" },
      { label: "每三天", value: "每三天" },
    ],

    [
      { label: "1", value: "01" },
      { label: "2", value: "02" },
      { label: "3", value: "03" },
      { label: "4", value: "04" },
      { label: "5", value: "05" },
      { label: "6", value: "06" },
      { label: "7", value: "07" },
      { label: "8", value: "08" },
      { label: "9", value: "09" },
      { label: "10", value: "10" },
      { label: "11", value: "11" },
      { label: "12", value: "12" },
      { label: "13", value: "13" },
      { label: "14", value: "14" },
      { label: "15", value: "15" },
      { label: "16", value: "16" },
      { label: "17", value: "17" },
      { label: "18", value: "18" },
      { label: "19", value: "19" },
      { label: "20", value: "20" },
      { label: "21", value: "21" },
      { label: "22", value: "22" },
      { label: "23", value: "23" },
      { label: "24", value: "24" },
    ],
    [
      { label: "0", value: "00" },
      { label: "1", value: "01" },
      { label: "2", value: "02" },
      { label: "3", value: "03" },
      { label: "4", value: "04" },
      { label: "5", value: "05" },
      { label: "6", value: "06" },
      { label: "7", value: "07" },
      { label: "8", value: "08" },
      { label: "9", value: "09" },
      { label: "10", value: "10" },
      { label: "11", value: "11" },
      { label: "12", value: "12" },
      { label: "13", value: "13" },
      { label: "14", value: "14" },
      { label: "15", value: "15" },
      { label: "16", value: "16" },
      { label: "17", value: "17" },
      { label: "18", value: "18" },
      { label: "19", value: "19" },
      { label: "20", value: "20" },
      { label: "21", value: "21" },
      { label: "22", value: "22" },
      { label: "23", value: "23" },
      { label: "24", value: "24" },
      { label: "25", value: "25" },
      { label: "26", value: "26" },
      { label: "27", value: "27" },
      { label: "28", value: "28" },
      { label: "29", value: "29" },
      { label: "30", value: "30" },
      { label: "31", value: "31" },
      { label: "32", value: "32" },
      { label: "33", value: "33" },
      { label: "34", value: "34" },
      { label: "35", value: "35" },
      { label: "36", value: "36" },
      { label: "37", value: "37" },
      { label: "38", value: "38" },
      { label: "39", value: "39" },
      { label: "40", value: "40" },
      { label: "41", value: "41" },
      { label: "42", value: "42" },
      { label: "43", value: "43" },
      { label: "44", value: "44" },
      { label: "45", value: "45" },
      { label: "46", value: "46" },
      { label: "47", value: "47" },
      { label: "48", value: "48" },
      { label: "49", value: "49" },
      { label: "50", value: "50" },
      { label: "51", value: "51" },
      { label: "52", value: "52" },
      { label: "53", value: "53" },
      { label: "54", value: "54" },
      { label: "55", value: "55" },
      { label: "56", value: "56" },
      { label: "57", value: "57" },
      { label: "58", value: "58" },
      { label: "59", value: "59" },
    ],
  ];
  useEffect(() => {
    getlist();
  }, []);
  let getlist = async () => {
    let { data } = await axios.get("/getClock");
    setList(data.data);
  };
  let add = async (value) => {
    await axios.post("/addClock", value);
    getlist();
  };
  return (
    <div id="SetTime" className="animate__animated animate__fadeInDown">
      {/* head */}
      <div id="SetTimeHead">
        <NavBar
          back={<ArrowLeft />}
          onBackClick={() => {
            Navigate("/sleep");
          }}
          style={{ background: "#2A6049", color: "white", height: "100%" }}
        >
          <p style={{ color: "white" }}>闹钟</p>
        </NavBar>
      </div>
      {/* 数据渲染 */}
      <div>
        {list.map((item) => {
          return (
            <div key={item._id} className="clockBox">
              <div
                onClick={() => {
                  Navigate("/SetTime");
                }}
                style={{ width: "90%", display: "flex" }}
              >
                <p>{item.type}</p>
                <p style={{ position: "absolute", left: "35%" }}>
                  {item.hour}:{item.minute}
                </p>
              </div>
              <Switch
                checked={item.flag}
                onChange={() => {
                  setFlag(!flag);
                }}
                style={{ "--checked-color": "#2A6049" }}
              />
            </div>
          );
        })}
      </div>
      {/* 添加闹钟 */}
      <div
        className="addClock"
        onClick={() => {
          setVisible(true);
        }}
      >
        +添加
      </div>
      <Picker
        title="设置时间"
        columns={basicColumns}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={value}
        onConfirm={(v) => {
          add({ type: v[0], hour: v[1], minute: v[2] });
        }}
      />
    </div>
  );
}
